<!DOCTYPE html>
<html>
<head>
	<title>base grammar learn</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style type="text/css">
		.class1{
			background: #2a28c37a;
  			color: #eee;
		}
		body div div{
			margin-left: 20px;
		}
		body div div span{
			display:block;
			padding-bottom: 10px;
		}
		ol{
			margin: 4px;
		}


	</style>
</head>
<body>
	<h2>This page some grammar practice of Vue.js </h2>
<div id="expression-support">
	【expression】
	<div>	
	{{5+5}}</br>
	{{  ok?'Yes':'No' }}</br>
	{{ message.split('').reverse().join('')}}</div>
</div>
<script type="text/javascript">
	var expression = new Vue({
		el:'#expression-support',
		data:{
			ok:true,
			message:'CHINA',
			id:'1'
		}
	});
</script>
<hr>

<div id="v-tag-test">
	<div> 
		<h2>there are some v-tag below </h2>
		<span>
			【v-bind】 this div is testing v-bind tag
			<div v-bind:class="{'class1':use}" > You can see my color? <input type="checkbox" name="" v-model="use"> </div>
			<!-- v-bind: 缩写 : -->
			<div :id="'list-'+id">
				Do you know what's my id?
			</div>
		</span>
		<span v-show="see">
			【v-show】 this div is testing v-show tag
			<div>I can show you if you set value 'see' to 'true'</div>
		</span>
		<span v-if="see">
			【v-if】 this div is testing v-if tag
			<div>can you see me?</div>
		</span>
		<span>
			【v-else-if】 【v-else】 this div is testing v-else-if、 v-else tag
			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
		</span>
		<span>
			【v-html】 this is a v-html content :
		 <div v-html=message></div> 
		</span>
		<span>
			【v-on】 this is a v-on content :
		 <div v-on:click='reverse()'>{{check_message}}</div>
		 <!-- v-on:click 缩写 @click -->
		 <div @click='hello'> or you wan to try this: </div>
		 <div id='dynamic'> 
			<div v-bind:style = "{color:'red', fontSize: fontSize + 'px'}">
				chick the button behind to dynamic changing the font size 【{{fontSize}} px】
				<button @click="++fontSize" >+</button>
				<button @click="--fontSize" >-</button>
			</div>
		 </div>
		 <div>
		 	<form action="index">
				<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
				<!-- <input v-on:keyup.13="submit"> -->
				<!-- 使用按键别名 -->
				Please press the 'Enter' on your keyboard to sumbit the form after your input
				<input v-on:keyup.enter="submit()">
			</form>
		 </div>

		</span>
		<span>
			【v-model】 this is a v-model binding content :{{input}}</br>
		 	<div><input v-model='input' type="" name=""></div>
		</span>
		<span>
			【v-for】 this div is testing v-for tag for array
			<div>
				<ol>
					<li v-for='site in sites'>
					{{site.name}}
					</li>
				</ol>
			</div>
			【v-for】 this div is testing v-for tag for Object
			<div>
				<ol>
					<li v-for='value in object'>
					{{value}}
					</li>
				</ol>
			</div>
			【v-for】 show index key value
			<div v-for='(key,value,index) in object'>
				index:{{index}} key: {{key}} value: {{value}} 
			</div>
		</span>
	</div>
</div>

<script type="text/javascript">
	var v_tag = new Vue({
		el:"#v-tag-test",
		data:{
			use:false,
			id:'1',
			fontSize:16,
			see:true,
			type:'C',
			message:"this showed by v-html tag controller",
			check_message:'click me to see what will be happened！',
			input:'please input some words',
			sites:[
				{'name':'Google'},{'name':'Yahoo'},{'name':'YouTube'}
			],
			object:{
				'name':'john',
				'age':24,
				'sex':'man'
			}
		},
		methods:{
			reverse:function(){
				this.check_message = this.check_message.split('').reverse().join('')
			},
			hello:function(){
				alert(this.check_message);
			},
			submit:function(){
				alert("触发键盘按钮事件");
				/*this.form.submit();*/
			}
		}
	});
</script>
<hr>
<div id="filters-test">
	<div>【filter】 {{message | capitalize}}</div>	
</div>
<script type="text/javascript">
	var filters_test = new Vue({
		el:'#filters-test',
		data:{
			message:'hello'
		},
		filters:{
			capitalize: function(value){
				if(!value) return '';
				value = value.toString();
				return value.charAt(0).toUpperCase() + value.slice(1);
			}
		}
	});
</script>
</body>
</html>